<template>
	<div>
	<el-form ref="task" :model="form" label="right" label-width="110px">
		<el-form-item label="节点ID:">
		  <el-input v-model="form.id"></el-input>
		</el-form-item>
	  <el-form-item label="节点名称:">
	    <el-input v-model="form.name"></el-input>
	  </el-form-item>
	  <el-form-item label="节点描述:">
	    <el-input v-model="form.documentation"></el-input>
	  </el-form-item>
	  <el-form-item label="监听器:">
	  		  <el-badge :value="executionListenerLength">
	  			<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
	  		  </el-badge>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.taskListener" label="任务监听器:">
	    <el-button size="small" @click="dialogName = 'taskListener'">编辑</el-button>
	  </el-form-item>
	  <!-- 一级下拉 -->
	  <el-form-item v-show="!!this.showConfig.userType" label="人员类型:">
	    <el-cascader
		v-model="form.cascaderVal"
		:options="userTypeOption"
		:props="{ expandTrigger: 'hover' }"
		:show-all-levels="false"
		placeholder="请选择类型"
		ref="userType"
		clearable
		 @change="getUserTypeVal"
		style="width: 100%;">
	    </el-cascader>
	  </el-form-item>
	  <!-- 二级 -->
	  <el-form-item v-if="showAppoint" :label="userTypeLabel">
	    <component
	    v-model="form[form.userType]"
	    :val_cn="form[form.userType+'_cn']"
	    :is="getComponent"
	    selUserDept
	    @touserdept="toSelDept(form,form.userType+'_dept',$event)"
	    @tousername="toSelName(form,form.userType+'_cn',$event)"
	    ></component>
	  </el-form-item>
	  <!-- 选择候选人和候选组 -->
	  <el-form-item  v-show="form.userType==='candidateUsers'||form.userType==='candidateGroups'" :label="userTypeLabel">
		<selUserPanel
		selType="selection"
		@tousername="toSelName(form,form.userType+'_cn',$event)"
		v-model="form[form.userType]"
		:val_cn="form[form.userType+'_cn']"
		></selUserPanel>
	  </el-form-item>
	  <!-- 计算二级 -->
	  <el-form-item  v-if="showCaculation" :label="userTypeLabel">
		<!-- <component
		v-model="form[form.userType]"
		:is="getComponent"
		></component> -->
		<el-input  v-model="form[form.userType]" placeholder="请填写角色"></el-input>
		<el-input  v-if="form.userType==='roleAndDept'" v-model="form.roleAndDept_dept" placeholder="请填写部门"></el-input>
	  </el-form-item>
	  <el-form-item label="多实例:">
	   <el-badge :is-dot="hasMultiInstance">
	     <el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
	   </el-badge>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.async" label="异步:">
	    <el-switch v-model="form.async" active-text="是" inactive-text="否" :active-value="true" :inactive-value="false">
	    </el-switch>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.isForCompensation" label="是否为补偿:">
	    <el-switch v-model="form.isForCompensation" active-text="是" inactive-text="否">
	    </el-switch>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.Edits" label="是否可编辑:">
	    <el-switch v-model="form.Edits" active-text="是" inactive-text="否" active-value="true" inactive-value="false">
	    </el-switch>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.triggerable" label="任务可触发:">
	    <el-switch v-model="form.triggerable" active-text="是" inactive-text="否">
	    </el-switch>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.autoStoreVariables" label="自动存储变量:">
	    <el-switch v-model="form.autoStoreVariables" active-text="是" inactive-text="否">
	    </el-switch>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.priority" label="优先级:">
	    <el-input v-model="form.priority" ></el-input>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.Class" label="类:">
	    <el-input v-model="form.Class"></el-input>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.ruleVariablesInput" label="输入变量:">
	    <el-input v-model="form.ruleVariablesInput"></el-input>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.rules" label="规则:">
	    <el-input v-model="form.rules"></el-input>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.resultVariable" label="变量:">
	    <el-input v-model="form.resultVariable"></el-input>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.exclude" label="排除:">
	    <el-switch v-model="form.exclude" active-text="是" inactive-text="否">
	    </el-switch>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.formKey" label="表单标识key:">
	    <el-input v-model="form.formKey"></el-input>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.skipExpression" label="跳过表达式:">
	    <el-input v-model="form.skipExpression"></el-input>
	  </el-form-item>
	  <el-form-item v-if="!!this.showConfig.dueDate" label="到期时间:">
	     <el-date-picker v-model="form.dueDate" type="datetime" placeholder="选择日期时间" style="width: 100%;"> </el-date-picker>
	  </el-form-item>
	</el-form>
	
	<executionListenerDialog
	v-if="dialogName === 'executionListenerDialog'"	
	:bpmnModel="bpmnModel"
	:element="element"
	@close="finishExecutionListener"
	></executionListenerDialog>
	
	<multiInstanceDialog
	  v-if="dialogName === 'multiInstanceDialog'"
	  :bpmnModel="bpmnModel"
	  :element="element"
	  @close="finishMultiInstance"
	/>
	</div>
</template>

<script>
	import {commonParse,userTaskParse} from '../common/parseElement.js'
	import mixinPanel from '../mixins/mixinPanel.js'
	import mixinSelUser from '@/components/SelUserPan/mixins/mixinSelUser.js'
	import mixinDept from '@/components/selDeptPanel/mixins/mixinDept.js'
	import mixinExecutionListener from '../mixins/mixinExecutionListener.js'
	import multiInstanceDialog from './property/multiInstance.vue'
	export default{
		mixins:[mixinPanel,mixinSelUser,mixinDept,mixinExecutionListener],
		components:{multiInstanceDialog},
		computed:{
			getComponent(){
				if(this.form.userType==='appointUser'){
					return 'selUserPanel'
				}
				if(this.form.userType==='appointCompany'||
				this.form.userType==='appointDept'||
				this.form.userType==='appointTeam'||
				this.form.userType==='appointOrg'){
					return 'SelDeptPanel'
				}
			},
			getOption(){
				if(!!this.form.userType){
					if(this.form.userType==='appointType'){
						return this.appointTypeOption
					}else if(this.form.userType==='calculation'){
						return this.calculationOption
					}
				}
				
			},
			processData(){
				let {crruentOrg,role,roleAndDept,roleAndDept_dept,roleAndCrruentDept,crruentManager,
					assignee,appointCompany,appointDept,appointTeam,resultVariable,skipExpression,dueDate,
					formKey,priority,Class,isForCompensation,triggerable,autoStoreVariables,
					exclude,async,Edits}=this.form
				return {crruentOrg,role,roleAndDept,roleAndDept_dept,roleAndCrruentDept,crruentManager,
					assignee,appointCompany,appointDept,appointTeam,resultVariable,skipExpression,dueDate,
					formKey,priority,Class,isForCompensation,triggerable,autoStoreVariables,
					exclude,async,Edits}
			}
		},
		data(){
			return{
				userTypeOption: [
					{ label: '默认', value: 'default' },
					{ label: '指定', value: 'appoint',
						children:[
							{label: '指定人员', value: 'appointUser'},
							{label: '指定公司', value: 'appointCompany'},
							{label: '指定部门', value: 'appointDept'},
							{label: '指定科室', value: 'appointTeam'},
							{label: '指定组织字段', value: 'appointOrg'}]},
					{ label: '计算', value: 'calculation',
						children:[
							{ label: '当前处理人', value: 'crruentOrg', 
								children:[{ label: '当前处理人.科室', value: 'crruentOrg_team' },
										   { label: '当前处理人.部门', value: 'crruentOrg_dept' }]},
							{ label: '当前处理人组织负责人', value: 'crruentManager',
								children:[{ label: '当前处理人.科室.组织负责人', value: 'crruentOrg_team_manager' },
										   { label: '当前处理人.部门.组织负责人', value: 'crruentOrg_dept_manager' }]},
							{ label: '按角色计算', value: 'role' },
							{ label: '按角色指定部门', value: 'roleAndDept' },
							{ label: '按角色当前部门', value: 'roleAndCrruentDept' }]},
					// { label: '候选', value: 'calculation',
					// 	children:[  
					// 		{ label: '候选人员', value: 'candidateUsers' },
					// 		{ label: '候选组', value: 'candidateGroups' }]},
				],
				customOptions:[
					{ label: 'ID', value: 'assignee' },
					{ label: '中文名', value: 'appointUser_cn' },
					{ label: '部门ID', value: 'appointUser_dept' },
					{ label: '按角色指定部门ID', value: 'roleAndDept_dept' },
					{ label: '候选者中文', value: 'candidateUsers_cn' },
					{ label: '侯选组中文', value: 'candidateGroups_cn' },
				],
				userOptions:{
					assignee: [
					  { name: '张三', id: 'zhangsan' },
					  { name: '李四', id: 'lisi' },
					  { name: '王五', id: 'wangwu' }
					],
					candidateUsers: [
					  { name: '张飞', id: 'zhangfei' },
					  { name: '赵云', id: 'zhaoyun' },
					],
					candidateGroups: [
					  { name: 'OA', id: 'oa' },
					  { name: '财务', id: 'finance' }
					],
				},
				userTypeLabel:'',
				userAppointTypeLabel:'',
				showAppoint:false,
				showCaculation:false,
				hasMultiInstance: false,
				form:{}
			}
		},
		methods:{
		},
		created() {
			let cache = commonParse(this.element)
			console.log(this.element)
			cache = userTaskParse(cache,this.userTypeOption)
			// this.$nextTick(function () {
				this.form = cache
			// })
			this.computedHasMultiInstance()
		},
		watch:{
			'form.userType':function(val,oldVal){
				if(val){
					let obj = this.$refs.userType.getCheckedNodes(true)[0];
					this.userTypeLabel = obj.label
					this.updateProperties({'flowable:userType':val})
					this.form.signalUser='#{'+this.form.id+'_assignees}'
				}
				if (oldVal) {
				  let types = new Array();
				   this.userTypeOption.map((item)=>{
					  if(Object.keys(item).indexOf('children')>0){
						item.children.map((sec)=>{return types.push(sec.value) })
					  }else{
						return types.push(item.value) 
					  }
					  });
				  this.customOptions.map((item)=>{return types.push(item.value)});
				  types.forEach(type => {
				    delete this.element.businessObject.$attrs[`flowable:${type}`];
				    this.$delete(this.form,type);
					// delete this.form[type];
				  });
				  // delete  this.element.businessObject.candidateGroups
				}
				
			},
			'form.cascaderVal':function(val,oldVal){
				if(!!val&&val.length>1){
					if(val[0]==='appoint'){
						this.showAppoint = true;
						this.showCaculation = false;
					}else if(val[0]==='calculation'){
						this.showAppoint = false;
						if(val[1]!=='crruentOrg'&&val[1]!=='crruentManager'){
							this.showCaculation = true;
						}else{
							this.showCaculation = false;
						}
					}
					
				}else{
					this.showAppoint = false;
					this.showCaculation = false;
				}
			},
			'form.appointUser':function(val){
				if(val==='') val = null
					this.updateProperties({'flowable:appointUser':val})
					this.updateProperties({'flowable:appointUser_cn':this.form.appointUser_cn})
					this.updateProperties({'flowable:appointUser_dept':this.form.appointUser_dept})
			},
			'form.candidateUsers':function(val){
				if(val==='') val = null
				this.updateProperties({'flowable:candidateUsers':val})
				this.updateProperties({'flowable:candidateUsers_cn':this.form.candidateUsers_cn})
			},
			'form.candidateGroups':function(val){
				if (this.form.userType !== 'candidateGroups') {
					delete this.element.businessObject.$attrs["flowable:candidateGroups"];
				  return
				}
				if(val==='') val = null
				this.updateProperties({'flowable:candidateGroups':val})
				this.updateProperties({'flowable:candidateGroups_cn':this.form.candidateGroups_cn})
			},
			'form.signalUser':function(val){
				if(val==='') val = null
				this.updateProperties({'flowable:assignee':val})
			},
			'processData':function(val){
				
				for(let obj in val){
					if(!!val[obj]){
						let key = 'flowable:'+obj
						this.updateProperties({[key]:val[obj]})
					}
					
				}
			}
		},
		methods:{
			getUserTypeVal(){
				
				let val = this.$refs.userType.getCheckedNodes(true);
				if(val.length>0){
					this.$set(this.form,'userType',val[0].value);
				}else{
					this.$delete(this.form,'userType');
					this.$delete(this.form,'signalUser');
					delete this.element.businessObject.$attrs['flowable:userType'];
					delete this.element.businessObject.$attrs['flowable:assignee'];
				}
			},
			finishMultiInstance() {
			  if (this.dialogName === 'multiInstanceDialog') {
			    this.computedHasMultiInstance()
			  }
			  this.dialogName = ''
			},
			computedHasMultiInstance() {
			  if (this.element.businessObject.loopCharacteristics) {
			    this.hasMultiInstance = true
			  } else {
			    this.hasMultiInstance = false
			  }
			}
			
		}
		
	}
</script>

<style  >
	label {
		font-weight: initial !important;
	}
</style>
